<template>
  <div>
   <h1>{{count}}</h1>
   <button @click="count++">累加</button>
  </div>
</template>

<script>
export default {
name:'App',
data(){
  return{
   count:1,
  }
},
/* 
    beforeUpdate触发条件：数据已经修改,视图还没有更新
      此时得到的数据和视图展示的数据是不一致的
  */
 beforeUpdate() {
  console.log(this.count);
  debugger;
 },
 /* 
    在updated执行之前,vue已经根据新的数据重新渲染得到了一个新的虚拟DOM,然后根据diff算法,修改了真实DOM(视图展示)
    此时数据和视图已经保持一致了
  */
 updated() {
  console.log(this.count);
  debugger
 },
}
</script>

<style>

</style>